"use client";

import { useEffect, useState } from 'react';
import { getHomeData } from '@/lib/api';
import type { HomeData } from '@/lib/api';
import Image from 'next/image';
import { getLogoUrl } from "@/lib/utils";

const footerLinks = [
  {
    title: "Home",
    href: "/",
  },
  {
    title: "Blog",
    href: "/blog",
  },
  {
    title: "Ai Navigation",
    href: "/navigation",
  },
  {
    title: "My Resume",
    href: "/about",
  },
]

export const Footer = () => {
  const [homeData, setHomeData] = useState<HomeData | null>(null);
  const logoUrl = getLogoUrl();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getHomeData();
        setHomeData(data);
      } catch (error) {
        console.error('Error fetching home data:', error);
      }
    };
    fetchData();
  }, []);

  return (
    <footer className='relative overflow-x-clip backdrop-blur-sm bg-indigo-950/30'>
      <div className="absolute h-[200px] w-[1600px] bottom-0 left-1/2 -translate-x-1/2 bg-gradient-to-t from-emerald-300/20 via-emerald-300/10 to-transparent -z-10 [mask-image:radial-gradient(50%_50%_at_bottom_center,black,transparent)]"></div>
      <div className="container">
        <div className="border-t border-white/15 py-4 md:py-6 text-sm flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2 text-white/50 hover:text-white/70 transition-colors order-1 md:order-none">
            <Image src={logoUrl} alt="illli Logo" width={18} height={18} />
            <span>&copy;2025.designd by artoor</span>
          </div>
          <div className="flex flex-col md:flex-row items-center gap-4 order-3 md:order-none">
            {homeData?.icp && (
              <a 
                href="https://beian.miit.gov.cn" 
                target="_blank" 
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 text-white/50 hover:text-white/70 transition-colors"
              >
                <span>{homeData.icp}</span>
              </a>
            )}
            {homeData?.beian && (
              <span className="text-white/50 hover:text-white/70 transition-colors">{homeData.beian}</span>
            )}
          </div>
          <nav className="flex flex-col md:flex-row items-center gap-6 order-2 md:order-none"> 
            {footerLinks.map((link) => (
              <a 
                href={link.href} 
                key={link.title} 
                className="inline-flex items-center gap-1.5 text-white/70 hover:text-white hover:scale-105 transform transition-all duration-300"
              >
                <span className="font-semibold">{link.title}</span>
              </a>
            ))}
          </nav>
        </div>
      </div>
    </footer>
  );
};
